<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('事项指南')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: summernote-css" />
    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
        a{color:#333;text-decoration:none;}
        a:hover{color:#3366cc;text-decoration:underline;}
        .demopage h2{font-size:14px;text-align:center;}
        .tabbox{width: 98%;margin: 20px 0 20px 0;position:relative;height:121px;overflow:hidden;border-bottom: solid 1px #ddd;}
        .tabbox .tabbtn{border-bottom: 3px solid #29588C;border-top:solid 1px #ddd;border-left:solid 1px #ddd;border-right:solid 1px #ddd;display: flex;display: -webkit-flex;justify-content: space-between;align-items: center;}
        .tabbox .tabbtn li{float:left;position:relative;margin:0 0 0 -1px;width: calc(100% / 6);height: 37px;line-height: 37px;text-align: center;cursor: pointer;border-right: solid 1px #ddd;}
        .tabbox .tabbtn li:last-child {border-right: 0;}
        .tabbox .tabbtn li a,.tabbox .tabbtn li span{display:block;float:left;height:30px;line-height:30px;overflow:hidden;width:133px;text-align:center;font-size:12px;cursor:pointer;}
        .tabbox .tabbtn li.current{border-left:solid 1px #d5d5d5;border-right:solid 1px #d5d5d5;border-top:solid 1px #c5c5c5;}
        .tabbox .tabbtn li.current a,.tabbox .tabbtn li.current{border-top:solid 2px #3366cc;height:37px;line-height:27px;font-size: 14px;background: #3366cc;color: #fcfcfc;font-weight:800;}
        .tabbox .tabcon{padding:10px;border-width:0 1px 1px 1px;border-color:#ddd;border-style:solid;height: 85px;}
        .tabbox .tabcon li{height:24px;line-height:24px;overflow:hidden;}
        .tabbox .tabcon li span{margin:0 10px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
        .element{font-size:16px;width: 100%;height: 60px;border:none;outline: none;}
        .form-group .control-label {background-color: #f5f5f5;border: 1px solid #ddd;line-height: 25px;}
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" th:object="${matterProject}">
        <input name="id" th:field="*{id}" type="hidden">
        <table class="form">
            <div >
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">事项名称：</label>
                        <div class="input-group">
                            <input name="name" class="form-control"  type="text" th:value="${matterProject.name}" readonly="readonly" style=" width: 280px;background-color: #ffffff;" >
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">责任单位：</label>
                        <div class="input-group">
                            <input name="mainOrgname" class="form-control"  type="text" th:value="${matterProject.mainOrgname}" readonly="readonly" style="width: 280px;background-color: #ffffff;" >
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">事项分类：</label>
                        <div class="input-group">
                            <input name="typeName" class="form-control"  type="text" th:value="${matterProject.typeName}" readonly="readonly" style="width: 280px;background-color: #ffffff;" >
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">预计完成时间：</label>
                        <div class="input-group">
                            <input name="expectedDate" class="form-control"  type="text" th:value="${#dates.format(matterProject.expectedDate, 'yyyy-MM-dd')}" readonly="readonly" style="width: 280px;background-color: #ffffff;" >
                        </div>
                    </div>
                </div>
            </div>
            <div class="tabbox" id="clicktab">
                <ul class="tabbtn">
                    <li class="current">办理依据</li>
                    <li>申报材料</li>
                    <li>办事条件</li>
                    <li>办理流程</li>
                    <li>收费标准</li>
                    <li>办理时间地址</li>
                </ul><!--tabbtn end-->
                <div class="tabcon">
                    <div><input class="element" name="pursuant" th:value="${matterProject.pursuant}" type="text" readonly></div>
                </div><!--tabcon end-->
                <div class="tabcon">
                    <div><input class="element" name="applicationMaterials" th:value="${matterProject.applicationMaterials}" type="text" readonly></div>
                </div>
                <div class="tabcon">
                    <div><input class="element" name="workConditions" th:value="${matterProject.workConditions}" type="text" readonly></div>
                </div>
                <div class="tabcon">
                    <div><input class="element" name="handlingProcedures" th:value="${matterProject.handlingProcedures}" type="text" readonly></div>
                </div>
                <div class="tabcon">
                    <div><input class="element" name="rates" th:value="${matterProject.rates}" type="text" readonly></div>
                </div>
                <div class="tabcon">
                    <div><input class="element" name="timeAddress" th:value="${matterProject.timeAddress}" type="text" readonly></div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6" >
                    <!--<input type="file" name="accessory" id="fileToUpload"/>-->
                    <a href="javascript:;" style="color: #0d8ddb;margin-top: 20px;display: block"  id="accessory_name" th:data-name="${matterProject.accessory}" th:text="${matterProject.accessoryOld}"></a>
                </div>

            </div>
        </table>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: summernote-js" />
<script th:src="@{/js/comboTreePlugin.js}"></script>
<script type="text/javascript">
    // var prefix = ctx + "linkong/matter";
    // $("#form-matter-edit").validate({
    //     focusCleanup: true
    // });
    //
    // function submitHandler() {
    //     if ($.validate.form()) {
    //         var file = document.getElementById('fileToUpload').files[0];
    //         var fileNameOld = file.name;
    //         if (file != null) {
    //             var data = new FormData();
    //             data.append("fileHandler",file);
    //             $.ajax({
    //                 type: "POST",
    //                 url: ctx + "common/upload",
    //                 data: data,
    //                 cache: false,
    //                 contentType: false,
    //                 processData: false,
    //                 dataType: 'json',
    //                 success: function(result) {
    //                     if (result.code == 0) {
    //                         edit(result.fileName,fileNameOld);
    //                     } else {
    //                         $.modal.alertError(result.msg);
    //                     }
    //                 },
    //                 error: function(error) {
    //                     $.modal.alertWarning("上传失败。");
    //                 }
    //             });
    //         }else {
    //             edit();
    //         }
    //     }
    // }
    //
    // function edit(fileName,fileNameOld) {
    //     var id = $("input[name='id']").val();
    //     var pursuant = $("input[name='pursuant']").val();
    //     var workConditions = $("input[name='workConditions']").val();
    //     var handlingProcedures = $("input[name='handlingProcedures']").val();
    //     var rates = $("input[name='rates']").val();
    //     var timeAddress = $("input[name='timeAddress']").val();
    //     var applicationMaterials = $("input[name='applicationMaterials']").val();
    //     $.ajax({
    //         cache : true,
    //         type : "POST",
    //         url : prefix + "/edit",
    //         data : {
    //             "id":id,
    //             "pursuant": pursuant,
    //             "accessory": fileName,
    //             "workConditions": workConditions,
    //             "handlingProcedures": handlingProcedures,
    //             "accessoryOld": fileNameOld,
    //             "rates": rates,
    //             "timeAddress": timeAddress,
    //             "applicationMaterials": applicationMaterials
    //         },
    //         async : false,
    //         error : function(request) {
    //             $.modal.alertError("系统错误");
    //         },
    //         success : function(data) {
    //             $.operate.successCallback(data);
    //         }
    //     });
    // }

    $(document).on('click','#accessory_name',function(e){
        var filename = $(this).attr('data-name');
        window.location.href = ctx + "common/download2?fileName="+filename;
    })

    $(function(){
        //选项卡鼠标滑过事件
        $('#statetab .tabbtn li').mouseover(function(){
            TabSelect("#statetab .tabbtn li", "#statetab .tabcon", "current", $(this))
        });
        $('#statetab .tabbtn li').eq(0).trigger("mouseover");

        //选项卡鼠标滑过事件
        $('#clicktab .tabbtn li').click(function(){
            TabSelect("#clicktab .tabbtn li", "#clicktab .tabcon", "current", $(this))
        });
        $('#clicktab .tabbtn li').eq(0).trigger("click");

        function TabSelect(tab,con,addClass,obj){
            var $_self = obj;
            var $_nav = $(tab);
            $_nav.removeClass(addClass),
                $_self.addClass(addClass);
            var $_index = $_nav.index($_self);
            var $_con = $(con);
            $_con.hide(),
                $_con.eq($_index).show();
        }

    });
</script>
</body>
</html>